<template>
  <div>
    <el-table border style="margin-bottom: 20px" :data="menuPermissionList" :expand-row-keys="expandKeys" row-key="id">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />

      <el-table-column prop="toCode" label="跳转权限值" />

      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <HintButton type="primary" icon="el-icon-plus" size="mini" :disabled="row.level === 4"
            @click="toAddPermission(row)" :title="getAddTitle(row.level)" />

          <HintButton type="primary" icon="el-icon-edit" size="mini" :disabled="row.level === 1"
            @click="toUpdatePermission(row)" :title="row.level === 4 ? '修改功能' : '修改菜单'" />

          <HintButton :disabled="row.level === 1" type="danger" icon="el-icon-delete" size="mini" title="删除"
            @click="removePermission(row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogPermissionVisible" :title="dialogTitle" @close="resetData">
      <el-form label-width="120px" ref="permission" :model="permission" :rules="permissionRules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="permission.name" />
        </el-form-item>

        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="permission.code" />
        </el-form-item>

        <el-form-item label="跳转路由权限值" prop="toCode" v-if="permission.level === 4">
          <el-input v-model="permission.toCode" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetData">取 消</el-button>
        <el-button type="primary" @click="addOrUpdatePermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PermissionApi from "@/api/acl/permission";

// 菜单权限校验的规则
const menuRules = {
  name: [{ required: true, message: "名称必须输入" }],
  code: [{ required: true, message: "权限值必须输入" }],
};
// 按钮功能权限校验的规则
const btnRules = {
  name: [{ required: true, message: "名称必须输入" }],
  code: [{ required: true, trigger: "blur", message: "功能权限值必须输入" }],
};
export default {
  name: "PermissionList",
  data() {
    return {
      menuPermissionList: [], //菜单的列表
      expandKeys: [], // 需要自动展开的项
      dialogPermissionVisible: false, //控制dialog的显示与隐藏
      permission: {
        // 要操作的菜单权限对象
        level: 0,
        name: "",
        code: "",
        toCode: "",
      },
    };
  },

  computed: {
    //动态计算添加功能的标题是什么
    dialogTitle() {
      const { id, level } = this.permission;
      if (id) {
        return level === 4 ? "修改功能" : "修改菜单";
      } else {
        return level === 4 ? "添加功能" : "添加菜单";
      }
    },
    //根据权限等级来确定校验规则
    permissionRules() {
      return this.permission.level === 4 ? btnRules : menuRules;
    },
  },
  methods: {
    //请求获取菜单权限的列表
    async fetchPermissionList() {
      const result = await PermissionApi.getPermissionList();
      this.menuPermissionList = result.data.children;
      this.expandKeys = [this.menuPermissionList[0].id];
    },
    //显示添加权限的dialog
    toAddPermission(row) {
      this.dialogPermissionVisible = true;
      this.permission.pid = row.id;
      this.permission.level = row.level + 1;
      this.permission.type = this.permission.level === 4 ? 2 : 1;
      // 清除校验(必须在界面更新之后)
      // this.$nextTick(() => this.$refs.permission.clearValidate());
    },

    //根据选择的级别得到想要展示的dialog的标题
    getAddTitle(level) {
      if (level === 1 || level === 2) {
        return "添加菜单";
      } else if (level === 3) {
        return "添加功能";
      }
    },

    //添加或者是重新编辑功能权限
    addOrUpdatePermission() {
      this.$refs.permission.validate(async (valid) => {
        if (valid) {
          const { permission } = this;
          if (permission.id) {
            await PermissionApi.updatePermission(permission)
            this.$message.success('修改成功')
          } else {
            await PermissionApi.addPermission(permission)
            this.$message.success('添加成功')
          }
          this.resetData();
          this.fetchPermissionList();
        }
      });
    },

    //显示更新的dialog
    toUpdatePermission(row) {
      this.dialogPermissionVisible = true;
      this.permission = { ...row }; // 使用浅拷贝
      this.permission.type = this.permission.level === 4 ? 2 : 1;

      // 清除校验(必须在界面更新之后)
      this.$nextTick(() => this.$refs.permission.clearValidate());
    },

    //删除某个权限节点
    removePermission(permission) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(async () => {
          const result = await PermissionApi.removePermission(permission.id);
          this.$message.success(result.message || "删除成功!");
          this.fetchPermissionList();
        })
        .catch((error) => {
          if (error === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          }
        });
    },

    //重置数据
    resetData() {
      this.dialogPermissionVisible = false;
      this.permission = {
        level: 0,
        name: "",
        code: "",
        toCode: "",
      };
    },
  },
  mounted() {
    this.fetchPermissionList();
  },
};
</script>
